<template>
  <HeaderNavTabarVue :title="titles" />
  <view class="modelView-box" :style="'min-height: ' + boxHeight + 'rpx;'">
    <picker
      mode="multiSelector"
      @change="bindPickerChange"
      @columnchange="columnchange"
      :value="index"
      :range="array"
    >
      <view class="measurement-info-list">
        <text class="info-list-left isrequired">对应模板</text>
        <view class="info-list-right">
          <view class="info-content">
            <view class="uni-input" style="font-size: 26rpx; font-weight: 550">{{
              modelValue
            }}</view>
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </view>
      </view>
    </picker>
    <view class="model-view-image" @tap="openMask" ref="previewImage" v-if="modelViewImage">
      <image :src="modelViewImage" alt="" mode="widthFix" />
      <!-- 固定 1 -->
      <!-- 选择1固定图片的正面数据宽度 -->
      <view v-show="modelViewDataId == 0">
        <text class="guding-one-zhengmianW">{{ apiParamsData.frontWidth }}</text>
        <!-- 选择1固定图片的正面数据高度 -->
        <text class="guding-one-zhengmianH">{{ apiParamsData.frontHeight }}</text>
      </view>

      <!-- 固定 2-->
      <view v-show="modelViewDataId == 1">
        <text class="guding-two-fangshuiW">{{ apiParamsData.waterproofWidth }}</text>
        <text class="guding-two-fangshuiH">{{ apiParamsData.waterproofHeight }}</text>
        <text class="guding-two-zuoceW">{{ apiParamsData.leftWidth }}</text>
        <text class="guding-two-zuoceH">{{ apiParamsData.leftHeight }}</text>
        <text class="guding-two-zhengmianW">{{ apiParamsData.frontWidth }}</text>
        <text class="guding-two-zhengmianH">{{ apiParamsData.frontHeight }}</text>
        <text class="guding-two-youceW">{{ apiParamsData.rightWidth }}</text>
        <text class="guding-two-youceH">{{ apiParamsData.rightHeight }}</text>
        <text class="guding-two-xiaceW">{{ apiParamsData.bottomWidth }}</text>
        <text class="guding-two-xiaceH">{{ apiParamsData.bottomHeight }}</text>
      </view>

      <!-- 固定-3 -->
      <view v-show="modelViewDataId == 2">
        <text class="guding-three-fangshuiW">{{ apiParamsData.waterproofWidth }}</text>
        <text class="guding-three-fangshuiH">{{ apiParamsData.waterproofHeight }}</text>
        <text class="guding-three-zhengmianW">{{ apiParamsData.frontWidth }}</text>
        <text class="guding-three-zhengmianH">{{ apiParamsData.frontHeight }}</text>
        <text class="guding-three-zuoceH">{{ apiParamsData.leftHeight }}</text>
        <text class="guding-three-zuoceW">{{ apiParamsData.leftWidth }}</text>
        <text class="guding-three-youceW">{{ apiParamsData.rightWidth }}</text>
        <text class="guding-three-youceH">{{ apiParamsData.rightHeight }}</text>
        <text class="guding-three-xiadiH">{{ apiParamsData.bottomHeight }}</text>
        <text class="guding-three-xiadiW">{{ apiParamsData.bottomWidth }}</text>
        <text class="guding-three-menmeiW">{{ apiParamsData.doorWidth }}</text>
        <text class="guding-three-menmeiH">{{ apiParamsData.doorHeight }}</text>
        <text class="guding-three-baozhuH">{{ apiParamsData.columnOneHeight }}</text>
        <text class="guding-three-baozhuW">{{ apiParamsData.columnOneWidth }}</text>
        <text class="guding-three-baozhu2W">{{ apiParamsData.columnThreeWidth }}</text>
        <text class="guding-three-baozhu2H">{{ apiParamsData.columnThreeHeight }}</text>
      </view>

      <!-- 多选-4 -->
      <view v-if="modelViewDataId == 3">
        <text class="duoxuan-four-fangshuiW">{{ apiParamsData.waterproofWidth }}</text>
        <text class="duoxuan-four-fangshuiH">{{ apiParamsData.waterproofHeight }}</text>
        <text class="duoxuan-four-zhengmianW">{{ apiParamsData.frontWidth }}</text>
        <text class="duoxuan-four-zhengmianH">{{ apiParamsData.frontHeight }}</text>
        <text class="duoxuan-four-zuoceH">{{ apiParamsData.leftHeight }}</text>
        <text class="duoxuan-four-zuoceW">{{ apiParamsData.leftWidth }}</text>
        <text class="duoxuan-four-youceW">{{ apiParamsData.rightWidth }}</text>
        <text class="duoxuan-four-youceH">{{ apiParamsData.rightHeight }}</text>
        <text class="duoxuan-four-xiadiH">{{ apiParamsData.bottomHeight }}</text>
        <text class="duoxuan-four-xiadiW">{{ apiParamsData.bottomWidth }}</text>
        <text class="duoxuan-four-menmeiW">{{ apiParamsData.doorWidth }}</text>
        <text class="duoxuan-four-menmeiH">{{ apiParamsData.doorHeight }}</text>
        <text class="duoxuan-four-baozhuH">{{ apiParamsData.columnOneHeight }}</text>
        <text class="duoxuan-four-baozhuW">{{ apiParamsData.columnOneWidth }}</text>
        <text class="duoxuan-four-baozhu2W">{{ apiParamsData.columnTwoWidth }}</text>
        <text class="duoxuan-four-baozhu2H">{{ apiParamsData.columnTwoHeight }}</text>
      </view>

      <!-- 多选-5 -->
      <view v-else-if="modelViewDataId == 4">
        <text class="duoxuan-five-fangshuiW">{{ apiParamsData.waterproofWidth }}</text>
        <text class="duoxuan-five-fangshuiH">{{ apiParamsData.waterproofHeight }}</text>
        <text class="duoxuan-five-zhengmianW">{{ apiParamsData.frontWidth }}</text>
        <text class="duoxuan-five-zhengmianH">{{ apiParamsData.frontHeight }}</text>
        <text class="duoxuan-five-zuoceW">{{ apiParamsData.leftWidth }}</text>
        <text class="duoxuan-five-zuoceH">{{ apiParamsData.leftHeight }}</text>
        <text class="duoxuan-five-youceW">{{ apiParamsData.rightWidth }}</text>
        <text class="duoxuan-five-youceH">{{ apiParamsData.rightHeight }}</text>
        <text class="duoxuan-five-xiadiW">{{ apiParamsData.bottomWidth }}</text>
        <text class="duoxuan-five-xiadiH">{{ apiParamsData.bottomHeight }}</text>
        <text class="duoxuan-five-menmeiW">{{ apiParamsData.doorWidth }}</text>
        <text class="duoxuan-five-menmeiH">{{ apiParamsData.doorHeight }}</text>
        <text class="duoxuan-five-baozhuW">{{ apiParamsData.columnOneWidth }}</text>
        <text class="duoxuan-five-baozhuH">{{ apiParamsData.columnOneHeight }}</text>
        <text class="duoxuan-five-baozhu3W">{{ apiParamsData.columnThreeWidth }}</text>
        <text class="duoxuan-five-baozhu3H">{{ apiParamsData.columnThreeHeight }}</text>
        <text class="duoxuan-five-baozhu2W">{{ apiParamsData.columnTwoWidth }}</text>
        <text class="duoxuan-five-baozhu2H">{{ apiParamsData.columnTwoHeight }}</text>

        <text class="duoxuan-five-chuchuangT-W">{{ apiParamsData.windowTopWidth }}</text>
        <text class="duoxuan-five-chuchuangT-H">{{ apiParamsData.windowTopHeight }}</text>
        <text class="duoxuan-five-chuchuangL-W">{{ apiParamsData.windowLeftWidth }}</text>
        <text class="duoxuan-five-chuchuangL-H">{{ apiParamsData.windowLeftHeight }}</text>
        <text class="duoxuan-five-chuchuangR-W">{{ apiParamsData.windowRightWidth }}</text>
        <text class="duoxuan-five-chuchuangR-H">{{ apiParamsData.windowRightHeight }}</text>
        <text class="duoxuan-five-chuchuangboli-W">{{ apiParamsData.windowWidth }}</text>
        <text class="duoxuan-five-chuchuangboli-H">{{ apiParamsData.windowHeight }}</text>
        <text class="duoxuan-five-chuchuangb-W">{{ apiParamsData.windowBottomWidth }}</text>
        <text class="duoxuan-five-chuchuangb-H">{{ apiParamsData.windowBottomHeight }}</text>
      </view>

      <!-- 多选-6 -->
      <view v-else-if="modelViewDataId == 5">
        <text class="duoxuan-six-fangshuiW">{{ apiParamsData.waterproofWidth }}</text>
        <text class="duoxuan-six-fangshuiH">{{ apiParamsData.waterproofHeight }}</text>
        <text class="duoxuan-six-zuoceW">{{ apiParamsData.leftWidth }}</text>
        <text class="duoxuan-six-zuoceH">{{ apiParamsData.leftHeight }}</text>
        <text class="duoxuan-six-yuoceW">{{ apiParamsData.rightWidth }}</text>
        <text class="duoxuan-six-yuoceH">{{ apiParamsData.rightHeight }}</text>
        <text class="duoxuan-six-zhengmianW">{{ apiParamsData.frontWidth }}</text>
        <text class="duoxuan-six-zhengmianH">{{ apiParamsData.frontHeight }}</text>
        <text class="duoxuan-six-xiadiW">{{ apiParamsData.bottomWidth }}</text>
        <text class="duoxuan-six-xiadiH">{{ apiParamsData.bottomHeight }}</text>
        <text class="duoxuan-six-menmeiW">{{ apiParamsData.doorWidth }}</text>
        <text class="duoxuan-six-menmeiH">{{ apiParamsData.doorHeight }}</text>
        <text class="duoxuan-six-baozhu1W">{{ apiParamsData.columnOneWidth }}</text>
        <text class="duoxuan-six-baozhu1H">{{ apiParamsData.columnOneHeight }}</text>
        <text class="duoxuan-six-baozhu2W">{{ apiParamsData.columnTwoWidth }}</text>
        <text class="duoxuan-six-baozhu2H">{{ apiParamsData.columnTwoHeight }}</text>
        <text class="duoxuan-six-baozhu3W">{{ apiParamsData.columnThreeWidth }}</text>
        <text class="duoxuan-six-baozhu3H">{{ apiParamsData.columnThreeHeight }}</text>
        <text class="duoxuan-six-baozhu4W">{{ apiParamsData.columnFourWidth }}</text>
        <text class="duoxuan-six-baozhu4H">{{ apiParamsData.columnFourHeight }}</text>
        <text class="duoxuan-six-baozhu5W">{{ apiParamsData.columnFiveWidth }}</text>
        <text class="duoxuan-six-baozhu5H">{{ apiParamsData.columnFiveHeight }}</text>
        <text class="duoxuan-six-baozhu6W">{{ apiParamsData.columnSixWidth }}</text>
        <text class="duoxuan-six-baozhu6H">{{ apiParamsData.columnSixHeight }}</text>
      </view>
    </view>
    <!-- 多选模板备注 -->
    <picker
      @change="choicesRemarkChange"
      :value="apiParamsData.choicesRemark"
      :range="choicesRemarkOption"
      class="picker-content"
      style="margin-top: 20rpx"
      v-if="modelViewDataId <= 2"
    >
      <view class="measurement-info-list">
        <text class="info-list-left isrequired">固定模板备注</text>
        <view class="info-list-right">
          <view class="uni-input">{{ apiParamsData.choicesRemark }}</view>
          <i class="iconfont icon-youjiantou"></i>
        </view>
      </view>
    </picker>
    <!-- 普通备注 -->
    <view class="picker-content" style="margin-top: 20rpx" v-else>
      <view class="measurement-info-list">
        <text class="info-list-left">备注</text>
        <view class="info-list-right">
          <input adjust-position type="text" class="uni-input" v-model="apiParamsData.remark" />
        </view>
      </view>
    </view>

    <uni-collapse v-if="modelViewData.length > 0">
      <uni-collapse-item
        :title="item.title"
        :open="true"
        v-for="(item, index) in modelViewData"
        :key="index"
      >
        <view class="measurement-info-list" v-for="(item2, index2) in item.childArr" :key="index2">
          <text
            :class="
              modelViewDataId === 0 || modelViewDataId === 1 || modelViewDataId === 2
                ? 'info-list-left isrequired'
                : 'info-list-left'
            "
            >{{ item2.txtName }}</text
          >
          <view class="info-list-right">
            <input
              adjust-position
              type="number"
              class="uni-input"
              v-model="apiParamsData[item2.valueName]"
            />
            <text class="unit">m</text>
          </view>
        </view>
      </uni-collapse-item>
    </uni-collapse>
    <view class="measurement-info-content" v-if="modelViewData.length <= 0"> 请先选择模板 </view>
    <!-- <view class="uploadImage">
			<view class="materialImage-title">
				<h4>上传图片</h4>
				<text>最多上传6张</text>
			</view>
			<view class="materialImage-upload" >
				<uni-file-picker limit="6" v-model="materialImage" fileMediatype="image" mode="grid" @select="upload"
					@progress="progress" @success="success" @fail="fail"></uni-file-picker>
			</view>
		</view> -->
    <view class="floor">
      <button class="go-material" @tap="saveNext(1)">
        <p>下一步</p>
        <text>填写生动化数据</text>
      </button>
      <button class="sub-data" @tap="saveNext(2)">
        <p>直接提交</p>
        <text>跳过生动化数据</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { getTitleBarHeight } from '@/utils/system.js'
import {
  addMeasurement,
  // commonUpload
} from '@/api/customer.js'
import { ref, reactive } from 'vue'
import HeaderNavTabarVue from '../../../components/HeaderNavTabar/HeaderNavTabar.vue'
// import html2canvas from 'html2canvas'
import modelMeasurementData from '/modelJSON/mdelData.js'
import { isObjectValuesNotEmpty } from '@/utils/objIsnull.js'
// 页面内容高度
const boxHeight = (uni.getSystemInfoSync().windowHeight - getTitleBarHeight()) * 2
const titles = ref('新建测量单 - 结构图数据')
const isEdit = ref('')
// 预览图实例
const previewImage = ref(null)
let materialImage = ref([]) // 图片
let modelViewDataId = ref(null)
// 表格展示数据
let modelViewData = ref([])
// 传给接口参数
let apiParamsData = ref({
  waterproofHeight: '',
  waterproofWidth: '',
  leftHeight: '',
  leftWidth: '',
  windowHeight: '',
  windowWidth: '',
  windowTopWidth: '',
  windowTopHeight: '',
  windowLeftWidth: '',
  windowLeftHeight: '',
  windowRightWidth: '',
  windowRightHeight: '',
  windowBottomWidth: '',
  windowBottomHeight: '',
  rightHeight: '',
  rightWidth: '',
  frontHeight: '',
  frontWidth: '',
  bottomHeight: '',
  bottomWidth: '',
  doorHeight: '',
  doorWidth: '',
  columnOneHeight: '',
  columnOneWidth: '',
  columnTwoHeight: '',
  columnTwoWidth: '',
  columnThreeHeight: '',
  columnThreeWidth: '',
  columnFourHeight: '',
  columnFourWidth: '',
  columnFiveHeight: '',
  columnFiveWidth: '',
  columnSixHeight: '',
  columnSixWidth: '',

  choicesRemark: '', // 多选备注
  remark: '',
})
const systemInfo = uni.getSystemInfoSync()
const isAndroid = systemInfo.platform.toLowerCase() === 'android'
// 选中的内容
let modelValue = ref('')
// 选中的图片
let modelViewImage = ref('')
// 调节的索引
let index = ref([0, 0])
// 展示的选择器数据
let array = ref([
  ['固定', '多选'],
  ['单片', '四周厚度无包柱', '四周厚度+两个包柱'],
])
// 替换的二级数据
let childArr = ref(modelMeasurementData)
// 组合的参数
let apiParams = reactive(null)
// 选中的模板
const bindPickerChange = (e) => {
  index.value = e.detail.value
  if (array.value[0].length != 0) {
    modelValue.value = array.value[0][index.value[0]]
  }
  if (array.value[1].length != 0) {
    modelViewDataId.value = childArr.value[index.value[0]][index.value[1]].numId
    modelValue.value += '-' + array.value[1][index.value[1]]
    modelViewImage.value = childArr.value[index.value[0]][index.value[1]].url
    modelViewData.value = childArr.value[index.value[0]][index.value[1]].data
    for (let key in apiParamsData.value) {
      if (apiParamsData.value[key]) {
        apiParamsData.value[key] = ''
      }
    }
  }
  console.log(array.value, 'array.value111')
}

const choicesRemarkOption = [
  '门头有厚度无两侧无包柱',
  '门头有厚度有两侧无包柱',
  '门头有厚度有两侧有包柱',
  '门头单侧厚度',
]
const choicesRemarkChange = (v) => {
  apiParamsData.value.choicesRemark = choicesRemarkOption[v.detail.value]
}
// 当滚动切换一级分类时，为当前的一级分类添加它的子类
const columnchange = (e) => {
  if (!childArr.value[e.detail.value]) return
  const childArrTxt = childArr.value[e.detail.value].map((v) => {
    return v.title
  })

  if (e.detail.column == 0) {
    array.value[1] = childArrTxt
  }
}
// 预览图片
const openMask = () => {
  // if (!previewImage.value) return
  // //显示加载框
  // uni.showLoading({
  // 	title: '加载中'
  // });
  // html2canvas(previewImage.value.$el).then(canvas => {
  // 	const imgUrl = canvas.toDataURL('image/jpeg')
  // 	uni.previewImage({
  // 		current: imgUrl,
  // 		urls: [imgUrl],
  // 	});
  // 	//隐藏加载框
  // 	uni.hideLoading();
  // }).catch(err => {
  // 	uni.showToast({
  // 		title: '生成图片失败',
  // 		icon: 'error'
  // 	})
  // 	//隐藏加载框
  // 	uni.hideLoading();
  // });
}
// // 获取上传状态
// const upload = (e) => {
// 	const tempFilePaths = e.tempFilePaths; //e是获取的图片源
// 	console.log(tempFilePaths);
// 	uni.uploadFile({
// 		url: commonUpload, //上传图片的后端接口
// 		filePath: tempFilePaths,
// 		name: 'file',
// 		success: (res) => {
// 			console.log(res.data, "图片")
// 		}
// 	})
// }
// // 获取上传进度
// const progress = (e) => {
// 	console.log('上传进度：', e)
// }
// // 上传成功
// const success = (e) => {
// 	console.log('上传成功')
// }
// // 上传失败
// const fail = (e) => {
// 	console.log('上传失败：', e)
// }

// 1 前往生动化测量 2 直接提交
const saveNext = (n) => {
  if (n === 2 && isEdit.value === false) {
    // 详情 点击 直接提交
    uni.showToast({
      title: '只有查看权限,不能提交',
      icon: 'none',
    })
    return
  }
  // console.log(apiParamsData.value, 'apiParamsData.value')
  // console.log(apiParamsData.value.choicesRemark, 'apiParamsData.value')
  // console.log(modelValue.value, 'modelValue.value') // 对应模板
  // console.log(modelViewDataId.value, 'modelViewDataId') // 0 1 2 固定
  const RequiredItemList = {
    modelValue: modelValue.value,
  }

  // 模板固定 必填备注
  if (modelViewDataId.value === 0 || modelViewDataId.value === 1 || modelViewDataId.value === 2) {
    RequiredItemList.choicesRemark = apiParamsData.value.choicesRemark
  }

  // 固定模式下 选项必填
  if (modelViewDataId.value === 0) {
    RequiredItemList.frontWidth = apiParamsData.value.frontWidth
    RequiredItemList.frontHeight = apiParamsData.value.frontHeight
  } else if (modelViewDataId.value === 1) {
    RequiredItemList.waterproofHeight = apiParamsData.value.waterproofHeight
    RequiredItemList.waterproofWidth = apiParamsData.value.waterproofWidth
    RequiredItemList.leftHeight = apiParamsData.value.leftHeight
    RequiredItemList.leftWidth = apiParamsData.value.leftWidth
    RequiredItemList.frontHeight = apiParamsData.value.frontHeight
    RequiredItemList.frontWidth = apiParamsData.value.frontWidth
    RequiredItemList.rightHeight = apiParamsData.value.rightHeight
    RequiredItemList.rightWidth = apiParamsData.value.rightWidth
    RequiredItemList.bottomHeight = apiParamsData.value.bottomHeight
    RequiredItemList.bottomWidth = apiParamsData.value.bottomWidth
  } else if (modelViewDataId.value === 2) {
    RequiredItemList.waterproofHeight = apiParamsData.value.waterproofHeight
    RequiredItemList.waterproofWidth = apiParamsData.value.waterproofWidth
    RequiredItemList.leftHeight = apiParamsData.value.leftHeight
    RequiredItemList.leftWidth = apiParamsData.value.leftWidth
    RequiredItemList.frontHeight = apiParamsData.value.frontHeight
    RequiredItemList.frontWidth = apiParamsData.value.frontWidth
    RequiredItemList.rightHeight = apiParamsData.value.rightHeight
    RequiredItemList.rightWidth = apiParamsData.value.rightWidth
    RequiredItemList.bottomHeight = apiParamsData.value.bottomHeight
    RequiredItemList.bottomWidth = apiParamsData.value.bottomWidth
    RequiredItemList.doorHeight = apiParamsData.value.doorHeight
    RequiredItemList.doorWidth = apiParamsData.value.doorWidth
    RequiredItemList.columnOneHeight = apiParamsData.value.columnOneHeight
    RequiredItemList.columnOneWidth = apiParamsData.value.columnOneWidth
    RequiredItemList.columnThreeHeight = apiParamsData.value.columnThreeHeight
    RequiredItemList.columnThreeWidth = apiParamsData.value.columnThreeWidth
  }
  // console.log(RequiredItemList, 'RequiredItemList')
  if (isObjectValuesNotEmpty(RequiredItemList)) {
    if (n === 1) {
      if (!apiParams) return
      let params = Object.assign(apiParamsData.value, apiParams)
      params.mtype = '其他类'
      params.material = isAndroid ? '安卓' : '苹果'
      params.type = modelValue.value
      uni.navigateTo({
        url: `/pages/measurement/material/material?sss=${encodeURIComponent(
          JSON.stringify(params),
        )}&isEdit=${isEdit.value}`,
      })
    } else {
      if (!apiParams) return
      let params = Object.assign(apiParamsData.value, apiParams)
      params.mtype = '其他类'
      params.material = isAndroid ? '安卓' : '苹果'
      params.type = modelValue.value
      if (isEdit.value) {
        // 编辑接口
        uni.showToast({
          title: '编辑功能开发中~',
          icon: 'error',
        })
      } else {
        // 新增
        addMeasurementFn(params)
      }
    }
  } else {
    uni.showToast({
      title: '请输入完整数据',
      icon: 'error',
    })
  }
}

const addMeasurementFn = async (params) => {
  let { code, msg } = await addMeasurement(params)
  if (code == 200) {
    uni.showToast({
      title: msg,
      icon: 'success',
    })
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/work/index',
      })
    }, 500)
  } else {
    uni.showToast({
      title: '操作失败',
      icon: 'error',
    })
  }
}
// 对应模板转换函数
const convertStrToIndexes = (str, array) => {
  const parts = str.split('-')
  if (parts.length !== array.length) {
    throw new Error('层级不匹配')
  }
  return parts.map((part, level) => {
    const index = array[level].indexOf(part)
    if (index === 1) {
      // 获取多选数据
      columnchange({ detail: { value: 1, column: 0 } })
    }
    if (index === -1) {
      throw new Error(`无效选项 "${part}" 在第 ${level} 层`)
    }
    return index
  })
}

onLoad((options) => {
  apiParams = JSON.parse(decodeURIComponent(options.sss))
  if (options.isEdit) {
    // console.log(JSON.parse(decodeURIComponent(options.sss)), 'options ')
    //   编辑/详情
    titles.value = JSON.parse(options.isEdit.toLowerCase())
      ? '编辑测量单 - 结构图数据'
      : '查看测量单 - 结构图数据'
    isEdit.value = JSON.parse(options.isEdit.toLowerCase()) // true 编辑 false 详情
    modelValue.value = apiParams.type // 对应模板
    const selectedIndexes = convertStrToIndexes(apiParams.type, array.value)
    bindPickerChange({ detail: { value: selectedIndexes } })
    apiParamsData.value = apiParams
  }
})
</script>
//
<script lang="renderjs" module="canvasImage">
// 	import html2canvas from 'html2canvas'
// 	export default {
// 		data() {
// 			return {
// 				previewImage: ''
// 			}
// 		},
// 		methods: {
// 			// 生成图片需要调用的方法
// 			generateImage(e, ownerFun) {
// 				ownerFun.callMethod('_showLoading', '正在生成图片') // 生成图片的 loading 提示
// 				setTimeout(() => {
// 					const dom = document.querySelector('.model-view-image') // 需要生成图片内容的 dom 节点
// 					html2canvas(dom).then((canvas) => {
// 						// 生成成功
// 						// html2canvas 生成成功的图片链接需要转成 base64位的url
// 						const imgUrl = canvas.toDataURL('image/jpeg')
// 						console.log(imgUrl, '----------------');
// 						uni.previewImage({
// 							current: imgUrl,
// 							urls: [imgUrl],
// 						});
// 					}).catch(err => {
// 						// 生成失败 弹出提示弹窗
// 						ownerFun.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
// 					})
// 				}, 300)
// 			}
// 		}
// 	}
</script>

<style lang="scss" scoped>
@import '../../../static/style/index.scss';

.modelView-box {
  box-sizing: border-box;
  padding: $spacing-row-base;
  // @include main-area-bgColor;
  background-color: $uni-bai;

  :deep(.uni-input-input) {
    text-align: right;
  }

  :deep(.uni-collapse) {
    background-color: transparent;

    .uni-collapse-item {
      border-radius: $border-radius-base;
      margin-top: $border-radius-base;

      .uni-collapse-item__wrap {
        border-radius: 0 0 $border-radius-base $border-radius-base;
      }

      .uni-collapse-item__title-arrow-active {
        .uni-icons {
          color: $btn-bg-color !important;
        }
      }

      .uni-collapse-item__wrap-content {
        border-bottom-width: 0px;
        border-radius: $border-radius-base;
      }

      .uni-collapse-item__title {
        background-color: #f2f3f5;
        border-radius: $border-radius-base;

        .uni-collapse-item__title-wrap {
          border-radius: $border-radius-base;

          .uni-collapse-item__title-box {
            background-color: #f2f3f5;
            border-radius: $border-radius-base;

            .uni-collapse-item__title-text {
              span {
                // @include font-color;
                color: $uni-fc-lin;
                font-size: 32rpx;
              }
            }
          }
        }
      }
    }
  }

  .model-view-image {
    position: relative;
    margin-top: 20rpx;

    image {
      width: 100%;
    }

    text {
      position: absolute;
      color: red;
      font-size: 16rpx;
    }

    .guding-one-zhengmianW {
      top: 9%;
      left: 47%;
    }

    .guding-one-zhengmianH {
      left: 1%;
      bottom: 52%;
    }

    .guding-two-fangshuiW {
      left: 49%;
      top: 0%;
    }

    .guding-two-fangshuiH {
      left: 14%;
      bottom: 78%;
    }

    .guding-two-zuoceW {
      left: 11%;
      bottom: 71%;
    }

    .guding-two-zuoceH {
      left: 6%;
      bottom: 47%;
    }

    .guding-two-zhengmianW {
      left: 49%;
      bottom: 70%;
    }

    .guding-two-zhengmianH {
      left: 15%;
      bottom: 49%;
    }

    .guding-two-youceW {
      left: 87%;
      bottom: 72%;
    }

    .guding-two-youceH {
      left: 92%;
      bottom: 47%;
    }

    .guding-two-xiaceW {
      left: 49%;
      bottom: 31%;
    }

    .guding-two-xiaceH {
      left: 17%;
      bottom: 20%;
    }

    .guding-three-fangshuiW {
      left: 50%;
      bottom: 91%;
    }

    .guding-three-fangshuiH {
      left: 13%;
      bottom: 86%;
    }

    .guding-three-zhengmianW {
      left: 50%;
      bottom: 82%;
    }

    .guding-three-zhengmianH {
      left: 14%;
      bottom: 72%;
    }

    .guding-three-zuoceH {
      left: 4%;
      bottom: 72%;
    }

    .guding-three-zuoceW {
      left: 9%;
      bottom: 62%;
    }

    .guding-three-youceW {
      left: 90%;
      bottom: 62%;
    }

    .guding-three-youceH {
      left: 94%;
      bottom: 71%;
    }

    .guding-three-xiadiH {
      left: 16%;
      bottom: 58%;
    }

    .guding-three-xiadiW {
      left: 50%;
      bottom: 64%;
    }

    .guding-three-menmeiW {
      left: 50%;
      bottom: 48%;
    }

    .guding-three-menmeiH {
      left: 18%;
      bottom: 53%;
    }

    .guding-three-baozhuH {
      left: 18%;
      bottom: 30%;
    }

    .guding-three-baozhuW {
      left: 22%;
      bottom: 8%;
    }

    .guding-three-baozhu2W {
      left: 77%;
      bottom: 8%;
    }

    .guding-three-baozhu2H {
      left: 82%;
      bottom: 29%;
    }

    // 多选样式
    .duoxuan-four-fangshuiW {
      left: 48%;
      bottom: 89%;
    }

    .duoxuan-four-fangshuiH {
      left: 10%;
      bottom: 85%;
    }

    .duoxuan-four-zhengmianW {
      left: 48%;
      bottom: 76%;
    }

    .duoxuan-four-zhengmianH {
      left: 18%;
      bottom: 71%;
    }

    .duoxuan-four-zuoceH {
      left: 2%;
      bottom: 71%;
    }

    .duoxuan-four-zuoceW {
      left: 8%;
      bottom: 60%;
    }

    .duoxuan-four-youceW {
      left: 87%;
      bottom: 60%;
    }

    .duoxuan-four-youceH {
      left: 94%;
      bottom: 70%;
    }

    .duoxuan-four-xiadiH {
      left: 14%;
      bottom: 56%;
    }

    .duoxuan-four-xiadiW {
      left: 43%;
      bottom: 59%;
    }

    .duoxuan-four-menmeiW {
      left: 49%;
      bottom: 47%;
    }

    .duoxuan-four-menmeiH {
      left: 16%;
      bottom: 52%;
    }

    .duoxuan-four-baozhuH {
      left: 15%;
      bottom: 29%;
    }

    .duoxuan-four-baozhuW {
      left: 21%;
      bottom: 5%;
    }

    .duoxuan-four-baozhu2W {
      left: 75%;
      bottom: 6%;
    }

    .duoxuan-four-baozhu2H {
      left: 81%;
      bottom: 27%;
    }

    // 多选五
    .duoxuan-five-fangshuiW {
      left: 50%;
      bottom: 91%;
    }

    .duoxuan-five-fangshuiH {
      left: 12%;
      bottom: 85%;
    }

    .duoxuan-five-zhengmianW {
      left: 48%;
      bottom: 76%;
    }

    .duoxuan-five-zhengmianH {
      left: 19%;
      bottom: 71%;
    }

    .duoxuan-five-zuoceH {
      left: 4%;
      bottom: 71%;
    }

    .duoxuan-five-zuoceW {
      left: 10%;
      bottom: 61%;
    }

    .duoxuan-five-youceW {
      left: 89%;
      bottom: 61%;
    }

    .duoxuan-five-youceH {
      left: 95%;
      bottom: 71%;
    }

    .duoxuan-five-xiadiH {
      left: 16%;
      bottom: 56%;
    }

    .duoxuan-five-xiadiW {
      left: 43%;
      bottom: 59%;
    }

    .duoxuan-five-menmeiW {
      left: 57%;
      bottom: 52%;
    }

    .duoxuan-five-menmeiH {
      left: 18%;
      bottom: 52%;
    }

    .duoxuan-five-baozhuH {
      left: 15%;
      bottom: 29%;
    }

    .duoxuan-five-baozhuW {
      left: 21%;
      bottom: 6%;
    }

    .duoxuan-five-baozhu3W {
      left: 77%;
      bottom: 6%;
    }

    .duoxuan-five-baozhu3H {
      left: 83%;
      bottom: 29%;
    }

    .duoxuan-five-baozhu2H {
      left: 57%;
      bottom: 29%;
    }

    .duoxuan-five-baozhu2W {
      left: 51%;
      bottom: 7%;
    }

    .duoxuan-five-chuchuangT-W {
      left: 41%;
      bottom: 47%;
    }

    .duoxuan-five-chuchuangT-H {
      left: 27%;
      bottom: 47%;
    }

    .duoxuan-five-chuchuangL-W {
      left: 26%;
      bottom: 42%;
    }

    .duoxuan-five-chuchuangL-H {
      left: 25%;
      bottom: 31%;
    }

    .duoxuan-five-chuchuangR-W {
      left: 47%;
      bottom: 42%;
    }

    .duoxuan-five-chuchuangR-H {
      left: 47%;
      bottom: 31%;
    }

    .duoxuan-five-chuchuangboli-W {
      left: 36%;
      bottom: 19%;
    }

    .duoxuan-five-chuchuangboli-H {
      left: 41%;
      bottom: 31%;
    }

    .duoxuan-five-chuchuangb-W {
      left: 36%;
      bottom: 12%;
    }

    .duoxuan-five-chuchuangb-H {
      left: 27%;
      bottom: 13%;
    }

    // 多选-6
    .duoxuan-six-fangshuiW {
      left: 50%;
      bottom: 91%;
    }

    .duoxuan-six-fangshuiH {
      left: 12%;
      bottom: 86%;
    }

    .duoxuan-six-zuoceW {
      left: 9%;
      bottom: 63%;
    }

    .duoxuan-six-zuoceH {
      left: 3%;
      bottom: 73%;
    }

    .duoxuan-six-yuoceW {
      left: 90%;
      bottom: 63%;
    }

    .duoxuan-six-yuoceH {
      left: 96%;
      bottom: 73%;
    }

    .duoxuan-six-zhengmianW {
      left: 49%;
      bottom: 78%;
    }

    .duoxuan-six-zhengmianH {
      left: 19%;
      bottom: 73%;
    }

    .duoxuan-six-xiadiW {
      left: 45%;
      bottom: 60%;
    }

    .duoxuan-six-xiadiH {
      left: 13%;
      bottom: 59%;
    }

    .duoxuan-six-menmeiW {
      left: 36%;
      bottom: 54%;
    }

    .duoxuan-six-menmeiH {
      left: 15%;
      bottom: 54%;
    }

    .duoxuan-six-baozhu1W {
      left: 19%;
      bottom: 6%;
    }

    .duoxuan-six-baozhu1H {
      left: 13%;
      bottom: 30%;
    }

    .duoxuan-six-baozhu2W {
      left: 31%;
      bottom: 6%;
    }

    .duoxuan-six-baozhu2H {
      left: 26%;
      bottom: 30%;
    }

    .duoxuan-six-baozhu3W {
      left: 42%;
      bottom: 6%;
    }

    .duoxuan-six-baozhu3H {
      left: 37%;
      bottom: 30%;
    }

    .duoxuan-six-baozhu4W {
      left: 54%;
      bottom: 6%;
    }

    .duoxuan-six-baozhu4H {
      left: 49%;
      bottom: 30%;
    }

    .duoxuan-six-baozhu5W {
      left: 68%;
      bottom: 6%;
    }

    .duoxuan-six-baozhu5H {
      left: 63%;
      bottom: 30%;
    }

    .duoxuan-six-baozhu6W {
      left: 79%;
      bottom: 6%;
    }

    .duoxuan-six-baozhu6H {
      left: 83%;
      bottom: 30%;
    }
  }

  .measurement-info-list {
    @include flex($align: center, $justify: space-between);
    padding: $spacing-row-base;
    border-radius: 16px;
    // @include background-color;
    background-color: $uni-bg-lin;

    .info-list-left {
      color: $uni-fc-fu-lin;
      font-size: $font-size-base;
    }

    .info-list-right {
      @include flex($align: center);

      .info-content {
        @include textStyleBase;
        font-size: 34rpx;
        display: flex;
        align-items: center;
      }

      .iconfont {
        margin-left: 16rpx;
        // @include font-color-auxiliary;
        color: $uni-fc-fu-lin;
      }
    }

    .unit {
      // @include font-color-auxiliary;
      color: $uni-fc-fu-lin;
    }
  }

  .measurement-info-content {
    margin: 50px 0;
    // @include font-color;
    color: $uni-fc-lin;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .uploadImage {
    // @include background-color;
    background-color: $uni-bg-lin;
    padding: $spacing-row-base $spacing-col-base;
    border-radius: 16rpx;

    .materialImage-title {
      @include flex(center, space-between);
      margin-bottom: $spacing-row-base;

      h4 {
        font-weight: 400;
        // @include font-color;
        color: $uni-fc-lin;
      }

      text {
        // @include font-color-auxiliary;
        color: $uni-fc-fu-lin;
      }
    }

    .materialImage-upload {
    }
  }

  .floor {
    width: 100%;
    @include flex($align: cneter, $justify: space-between);
    margin-top: 40rpx;

    button {
      width: 335rpx;
      height: 104rpx;
      @include flex($align: center, $flex-column: column);
      line-height: normal;
      padding: 14rpx 0;
      box-sizing: border-box;

      p {
        font-size: 30rpx;
      }

      text {
        font-size: 24rpx;
      }
    }

    .go-material {
      background-color: $btn-bg-color-2;
      border: 1px solid $btn-bg-color;

      p {
        color: $text-color;
      }

      text {
        color: $text-color-auxiliary;
      }
    }

    .sub-data {
      background-color: $btn-bg-color;

      p {
        color: $text-color-white;
      }

      text {
        color: $text-btn-color;
      }
    }
  }
}
</style>
